import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
  } from 'antd'
  import { PlusOutlined } from '@ant-design/icons'
  import { Link,useSearchParams,useNavigate } from 'react-router-dom'
  import './index.scss'
  import {useState,useEffect} from 'react'
import { createArticleAPI, getArticleById, updateArticleAPI } from '@/apis/article'
import {useChannel} from '@/hooks/useChannel'
  
  const { Option } = Select
  
  const Publish = () => {
    // 获取频道列表
    const navigate = useNavigate()
    const {channelList} = useChannel()

     //提交表单
     const onFinish =async(formValue)=>{
        // console.log(formValue)
        //校验上传图片的type数量是否和imageList数量相等
        if(imageList.length !== type) return message.warning('图片数量不匹配')

        const {title, content, channel_id} = formValue
        //1.按照接口文档的格式处理收集到的表单数据
        const reqData = {
          title:title,
          content,//简写
          cover:{
            type:type,
            // images:imageList.response.data.url
            //需要返回一个数组对象
            // images: imageList.map(item => item.response.data.url)
            //上面逻辑只符合新增的数据结构，不符合编辑
            images:imageList.map(item =>{
              if(item.response){
                return item.response.data.url
              }else{
                return item.url
              }
            })
          },
          channel_id
        }
        //2.调用接口提交
        // 有id调编辑接口，无id调新增接口
        if(articleId){
          const res=await updateArticleAPI({...reqData, id:articleId})
          //接口成功响应后给出提示+跳转页面
          if(res.message==='OK'){
            message.success('编辑成功')
            navigate('/article')
          }
        }else{
          const res = await createArticleAPI(reqData)
          if(res.message==='OK'){
            message.success('新增成功')
            navigate('/article')
          }
        }
     }

     //上传回调
     const [imageList, setImageList] = useState([])
     const onChange=(value)=>{
        // console.log('正在上传中', value)
        setImageList(value.fileList)
     }

     //切换图片封面类型
     const [type, setType] = useState(1)
     const onTypeChange =(e)=>{
      // console.log('切换封面了' ,value)
      setType(e.target.value)
     }

     //回填数据
     const [searchParams] = useSearchParams()
     const articleId = searchParams.get('id')
     //获取实例
     const [form] = Form.useForm() 
    //  console.log(articleId)
     useEffect(()=>{
      //1.通过id获取数据
      async function getArticleDetail(){ 
        const res = await getArticleById(articleId)
        //处理数据结构：set方法->{type:3} 现拿到的结构{cover:{type:3}}
        form.setFieldsValue({
          ...res.data,
          type:res.data.cover.type
        })
        //回填图片列表
        setType(res.data.cover.type)
        //显示图片（格式：{url:url})
        setImageList(res.data.cover.images.map(url=>{
          return {url}
        }))
      }
      //只有有id的时候才调用此函数
      if(articleId){
        getArticleDetail()
      }
      //2.调用实例方法 完成回填

     },[articleId,form])
    return (
      <div className="publish">
        <Card
          title={
            <Breadcrumb items={[
              { title: <Link to={'/'}>首页</Link> },
              { title: `${articleId ? '编辑' : '发布'}文章` },
            ]}
            />
          }
        >
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ type: 1 }}
            onFinish={onFinish}
            form={form}
          >
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
            >
              <Input placeholder="请输入文章标题" style={{ width: 400 }} />
            </Form.Item>
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: '请选择文章频道' }]}
            >
              <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                {/* value属性用户选中后会自动收集起来作为接口的提交字段 */}
                {channelList.map(item=> <Option key={item.id} value={item.id}>{item.name}</Option>)}
              </Select>
            </Form.Item>
            <Form.Item label="封面">
              <Form.Item name="type">
                <Radio.Group onChange={onTypeChange}>
                  <Radio value={1}>单图</Radio>
                  <Radio value={3}>三图</Radio>
                  <Radio value={0}>无图</Radio>
                </Radio.Group>
              </Form.Item>
              {/* 
              listType：决定选择文件框的外观样式
              showUploadList：控制显示上传列表
              */}
              {
                type!==0 && < Upload
                listType="picture-card"
                showUploadList
                action={'http://geek.itheima.net/v1_0/upload'}
                name="image"
                onChange={onChange}
                maxCount={type}
                fileList={imageList}
              >
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
              }
              
            </Form.Item>
            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: '请输入文章内容' }]}
            >
                {/* 富文本编辑器 */}
                <ReactQuill
                    className="publish-quill"
                    theme="snow"
                    placeholder="请输入文章内容"
                    />
            </Form.Item>
  
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit">
                  发布文章
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
  
  export default Publish